

<style >

    .vue-pagination *{

        font-family:"Segoe UI";

    }

    .vue-pagination li{

        list-style:none;

    }

    .vue-pagination a{

        text-decoration:none;

    }

    .vue-pagination {

        position: relative;



    }

    .vue-pagination li{

        display: inline-block;

        margin:0 5px;

    }

    .vue-pagination li a{

        padding:.5rem 1rem;

        display:inline-block;

        border:1px solid #ddd;

        background:#fff;

        color:#2750b1;

    }

    .vue-pagination li a:hover{

        background:#eee;

    }

    .vue-pagination li.active a:hover,

    .vue-pagination li.active a{

        background:#2750b1;

        color:#fff;

        cursor: text!important;

    }

    .vue-pagination li.disable a:hover,

    .vue-pagination li.disable a{

        background:#FFF;

        color:#999;

        cursor: text!important;

    }

    .vue-pagination li.text a:hover,

    .vue-pagination li.text a{

        background: #FFF;

        color: #555;

        border-color: #FFF;

    }

</style>



<script type="text/x-template" id="template-pagination">

    <ul class="vue-pagination" v-show="allPage>0">



        <li v-show="current <= 1" :class="{'disable': current == 1}" ><a>首页</a></li>

        <li v-show="current > 1 " @click="turnPage(1)" ><a href="javascript:void(0)">首页</a></li>



        <li v-show="current <= 1" :class="{'disable': current <= 1}" ><a>上一页</a></li>

        <li v-show="current > 1 " @click="turnPage(current - 1)" ><a href="javascript:void(0)">上一页</a></li>



        <li v-show="current > 4 " @click="turnPage(1)" ><a href="javascript:void(0)">1</a></li>

        <li v-show="current > 4" class="text" ><a>...</a></li>



        <li v-for="index in pages" @click="turnPage(index)" :class="{'active':current == index}" :key="index">

            <a v-if="current == index"  >{{index}}</a>

            <a v-if="current != index" href="javascript:void(0)" >{{index}}</a>

        </li>



        <li v-show="current < allPage - 4" class="text" ><a>...</a></li>



        <li v-show="allPage<=current " :class="{'disable': allPage<=current || allPage<=0}"><a >下一页</a></li>

        <li v-show="allPage>current " @click="turnPage(current + 1)"><a href="javascript:void(0)" >下一页</a></li>

    </ul>

</script>



<script>



    Vue.component("pagination", {

        template:"#template-pagination",

        props: [

            'limit',

            'offset',

            'total'

        ],

        data:function() {

            return {

                current:1,

                showItem:5,

                allPage:5

            }

        },

        computed:{

            pages:function() {

                if (this.limit == 0) throw new DOMException('property limit cannot be zero!');


                this.current = Math.floor(this.offset / this.limit) + 1;

               // this.allPage = Math.floor(this.total / this.limit) + 1;

                var allPage = Math.ceil(this.total / this.limit);

                if(allPage==0){

                    allPage=1;

                }

                this.allPage = allPage;

                var pag = [];

                if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数

                    //总页数和要显示的条数那个大就显示多少条

                    var i = Math.min(this.showItem,this.allPage);

                    while(i){

                        pag.unshift(i--);

                    }

                }else{ //当前页数大于显示页数了

                    var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始

                            i = this.showItem;

                    if( middle >  (this.allPage - this.showItem)  ){

                        middle = (this.allPage - this.showItem) + 1

                    }

                    while(i--){

                        pag.push( middle++ );

                    }

                }

                return pag

            }

        },

        methods:{

            turnPage:function(index){

                if(index == this.current) return;

                this.current = index;

                var offset = ((this.current - 1) * this.limit);

                this.$emit('turn', offset, this.limit);

            }

        }

    });

</script>